<template>
  <div class="goods-management">
    <!-- 查询条件 -->
    <div class="search-bar">
      <el-input v-model="code" placeholder="请输入商品编码" class="search-input" />
      <el-input v-model="name" placeholder="请输入商品名称" class="search-input" />
      <el-select v-model="auditStatus" placeholder="审核状态" class="status-select">
        <el-option label="全部" :value="''"></el-option>
        <el-option label="待审核" :value="1"></el-option>
        <el-option label="已审核" :value="2"></el-option>
        <el-option label="审核未通过" :value="3"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="init">查询</el-button>
    </div>

    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%" class="goods-table">
      <el-table-column prop="id" label="序号" width="80"></el-table-column>
      <el-table-column prop="categoryName" label="一级分类" width="120"></el-table-column>
      <el-table-column prop="name" label="商品名称" width="150"></el-table-column>
      <el-table-column prop="code" label="商品编码" width="150"></el-table-column>
      <el-table-column prop="spec" label="规格" width="120"></el-table-column>
      <el-table-column prop="price" label="价格(元)" width="100"></el-table-column>
      <el-table-column prop="num" label="数量(份)" width="100"></el-table-column>
      <el-table-column prop="availableStock" label="可用库存(份)" width="120"></el-table-column>
      <el-table-column prop="totalReplenishment" label="合计补货" width="120"></el-table-column>
      
      <!-- 审核状态列 -->
      <el-table-column label="审核状态" width="120">
        <template #default="{ row }">
          <span class="audit-status" @click="openAllocatestores(row)">
            {{ auditStatusText(row.auditStatus) }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="auditTotal" label="审核合计数量" width="120"></el-table-column>
      <el-table-column prop="compareNeed" label="对比需求" width="100"></el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      layout="prev, pager, next, jumper, ->, total"
      class="pagination"
    />

    <!-- 弹窗：显示 Allocatestores 组件 -->
    <el-dialog v-model="allocatestoresDialogVisible" :title="dialogTitle" width="600px">
      <!-- 弹出的组件，传递id和状态 --> <!-- 监听子组件更新 -->
      <Allocatestores 
        v-if="allocatestoresDialogVisible"
        :id="selectedRow.id"
        :status="selectedRow.auditStatus"
        @update:detail="updateTableData"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { useRoute } from "vue-router";
import { queryRestokingDetail } from "@/api/allocate/allocate.js";
import Allocatestores from "@/views/allocate/allocatestores.vue"; // 弹出组件

const tableData = ref([]);
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const code = ref("");
const name = ref("");
const auditStatus = ref("");
const route = useRoute();
const order = ref({
  id: route.query.id || ""
});

// 弹窗控制 & 选中行
const allocatestoresDialogVisible = ref(false);
const selectedRow = ref({});
const dialogTitle = ref("");

// 审核状态文本映射
function auditStatusText(status) {
  if (status === 1) return "待审核";
  if (status === 2) return "已审核";
  if (status === 3) return "审核未通过";
  return "未知状态";
}



// 点击审核状态，打开弹窗并传递数据
function openAllocatestores(row) {
  selectedRow.value = row;
  dialogTitle.value = `【${auditStatusText(row.auditStatus)}】详情`;
  allocatestoresDialogVisible.value = true;
}

// 查询列表数据
async function init() {
  const queryParams = {
    auditStatus: auditStatus.value,
    categoryName: "",
    code: code.value,
    name: name.value,
    orderId: order.value.id,
    page: page.value,
    pageSize: pageSize.value,
  };
  try {
    const res = await queryRestokingDetail(queryParams);
    if (res.code === 200) {
      tableData.value = res.data.list;
      total.value = res.data.total;
    } else {
      ElMessage.error(res.msg || "查询失败");
    }
  } catch (error) {
    ElMessage.error("请求出错");
  }
}

// 分页变化时重新加载数据
const handleCurrentChange = (newPage) => {
  page.value = newPage;
  init();
};

// 监听子组件更新主表格数据
function updateTableData(updatedData) {
  const index = tableData.value.findIndex(item => item.id === updatedData.id);
  if (index !== -1) {
    tableData.value[index] = { ...tableData.value[index], ...updatedData };
  }
}

onMounted(() => {
  init();
});
</script>

<style scoped>
.audit-status {
  color: #409EFF;
  cursor: pointer;
  text-decoration: underline;
}
</style>